<template>
	<view class="calculator-container">
		<!-- 健康数据显示 -->
		<view class="display">
			<view class="history">
				<text v-if="gender">性别：{{gender}}</text>
				<text v-if="age">年龄：{{age}}岁</text>
			</view>
			<view class="current">{{ current || '0' }}<text class="unit">{{unitMap[type]}}</text></view>
		</view>

		<!-- 健康功能键 -->
		<view class="row health-keys">
			<button class="func-btn" :class="{active: type==='height'}" @tap="switchType('height')">身高</button>
			<button class="func-btn" :class="{active: type==='weight'}" @tap="switchType('weight')">体重</button>
			<button class="func-btn danger" @tap="clear">AC</button>
		</view>

		<!-- 计算器主体 -->
		<view class="keyboard">
			<view class="row">
				<button class="func-btn" @tap="toggleGender">{{gender}}</button>
				<button class="func-btn" @tap="toggleUnit">单位:{{unit}}</button>
				<button class="func-btn" @tap="inputDot">.</button>
				<button class="operator-btn" @tap="calculate">=</button>
			</view>

			<view class="num-pad">
				<view class="column">
					<button v-for="n in [7,4,1]" :key="n" class="num-btn" @tap="inputNumber(n)">{{n}}</button>
					<button class="func-btn" @tap="switchType('age')">年龄</button>
				</view>

				<view class="column">
					<button v-for="n in [8,5,2]" :key="n" class="num-btn" @tap="inputNumber(n)">{{n}}</button>
					<button class="num-btn" @tap="saveRecord">保存</button>
				</view>

				<view class="column">
					<button v-for="n in [9,6,3]" :key="n" class="num-btn" @tap="inputNumber(n)">{{n}}</button>
					<button class="operator-btn" @tap="showHistory">历史</button>
				</view>

				<view class="column">
					<button class="func-btn" @tap="toggleUnit">单位</button>
					<button class="num-btn" @tap="inputNumber(0)">0</button>
					<button class="equal-btn" @tap="showReport">报告</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: '',
				type: 'height', // height/weight/age
				gender: '男',
				unit: '公制', // 公制/英制
				records: [],
				healthData: {
					height: null,
					weight: null,
					age: 25
				},
				unitMap: {
					height: 'cm',
					weight: 'kg',
					age: '岁'
				}
			}
		},
		methods: {
			// 输入处理
			inputNumber(n) {
				this.current = this.current === '0' ? n.toString() : this.current + n
				this.updateHealthData()
			},

			// 单位切换
			toggleUnit() {
				this.unit = this.unit === '公制' ? '英制' : '公制'
				this.convertUnits()
			},

			// 健康计算
			calculate() {
				const bmi = this.calcBMI()
				const report = {
					bmi: bmi.toFixed(1),
					fatRate: this.calcFatRate(bmi),
					idealWeight: this.calcIdealWeight()
				}
				uni.showModal({
					title: '健康报告',
					content: `BMI: ${report.bmi}（${this.getBMICategory(report.bmi)}）
体脂率: ${report.fatRate}%
理想体重: ${report.idealWeight}kg`
				})
			},

			// 核心算法
			calcBMI() {
				const weight = this.unit === '公制' ?
					this.healthData.weight :
					this.healthData.weight * 0.453592
				const height = this.unit === '公制' ?
					this.healthData.height / 100 :
					this.healthData.height * 0.0254
				return weight / (height * height)
			},

			getBMICategory(bmi) {
				if (bmi < 18.5) return '体重不足'
				if (bmi < 24) return '健康范围'
				if (bmi < 28) return '超重'
				return '肥胖'
			},

			calcFatRate(bmi) {
				// Deurenberg公式
				return (1.2 * bmi + 0.23 * this.healthData.age - 5.4 - (10.8 * (this.gender === '男'))).toFixed(1)
			},

			calcIdealWeight() {
				// 布洛卡公式
				const height = this.healthData.height - 100
				return (height * (this.gender === '男' ? 0.9 : 0.85)).toFixed(1)
			}
		}
	}
</script>

<style lang="scss">
	/* 保持原计算器样式 */
	.calculator-container {
		background: #f0f0f0;
		padding: 20rpx;

		.display {
			background: #fff;
			padding: 30rpx;

			.current {
				font-size: 48rpx;

				.unit {
					color: #666;
					font-size: 24rpx;
				}
			}
		}

		.health-keys {
			margin: 20rpx 0;

			button.active {
				background: #e0e0e0;
			}
		}

		.num-pad {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* 新增健康状态颜色 */
	.danger {
		color: #ff9500;
	}

	.warning {
		color: #ff3b30;
	}

	.success {
		color: #34c759;
	}
</style>